<template>
    <div class="address-list">
      <div class="tree-wrap">
        <div class="search-ctrl f-l" >
          <input type="text" class="search-text query-msm-search"
                 v-model="searchStr"
                 placeholder="搜索部门名称或警员姓名">
          <button type="button"
                  @click="searchBtn"
                  style="right: 46px;"
                  class="search-btn btn btn-info" >搜索</button>
          <button type="button"
                  @click="clearSearBtn"
                  class="search-btn btn btn-info" >清空</button>
        </div>
        <div class="tree-content" style="height:100%">
          <div id="tree-dep" class="ztree div-tree"></div>
        </div>
      </div>
        <!-- {{TreeNodes}} -->
      <div class="content-wrap">
        <div class="title-wrap">
          <img class="title-img" :src="require('@/../static/img/bg_addressList.jpg')" alt="">
          <div class="user-wrap">
            <div class="user-img-wrap">
              <img class="user-img" :src="userImgSrc" alt="">
            </div>
            <div class="user-name" v-text="userName" ></div>
          </div>
        </div>
        <div class="details-wrap">
          <div class="details-department" v-show="isDepartment">
            <div class="department-wrap">
              <span class="department-title">电话：</span>
              <span class="department-content" v-text="stationRadioId"></span>
            </div>
            <div class="department-wrap">
              <span class="department-title">电台：</span>
              <span class="department-content" v-text="stationTel"></span>
            </div>
          </div>
          <div class="details-department" v-show="!isDepartment">
            <div class="department-wrap">
              <span class="department-title">单位：</span>
              <span class="department-content" v-text="policeDepartment"></span>
            </div>
            <div class="department-wrap">
              <span class="department-title">电台：</span>
              <span class="department-content" v-text="policeRadioId"></span>
            </div>
            <div class="department-wrap">
              <span class="department-title">电话：</span>
              <span class="department-content" v-text="policePhone"></span>
            </div>
            <div class="department-wrap">
              <span class="department-title">职位：</span>
              <span class="department-content" v-text="policePosition"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "addressList",
    data(){
      return {
        setting : {
          data: {
            simpleData: {
              enable: true
            },
          },
          view: {
            showIcon: this.showIconForTree
          },
          callback: {
            onClick: this.zTreeOnClick,
            onExpand: this.zTreeOnExpand
          }
        },
        hasIconData: null, // 渲染树的数据
        userImgSrc: '',   // 图片地址
        userName: '',    // 图片旁边对应名称
        stationRadioId: '',  // 部门的手台
        stationTel: '',  // 部门的电话
        isDepartment: false, // 点击的是否是部门
        policePhone: '', // 点击人员电话
        policeRadioId: '', // 点击人员电台
        policePosition: '', // 点击人员职位
        policeDepartment: '', // 点击人员单位
        searchStr: '',
      }
    },
    mounted(){
      //初始化加载树结构
      this.searchBtn()
    },
    methods: {
      // 搜索框搜索事件
      searchBtn(){
        if(this.searchStr.length>0){
          this.treeAjax(baseURL+'api/jp-BIRM-UserProfile-ms/addressbook/search/findbykeywords?keyWord='+this.searchStr,"get")
        }else {
          this.treeAjax(baseURL+'api/jp-BIRM-UserProfile-ms/addressbook/maillist/findalldata','get');
        }
      },
      // 搜索框清除事件
      clearSearBtn(){
        this.searchStr = '';
        this.treeAjax(baseURL+'api/jp-BIRM-UserProfile-ms/addressbook/maillist/findalldata','get');
      },
      //树结构加载
      treeAjax(url,type,params){
        this.$axios[type](url)
          .then((data)=>{
            // $.fn.zTree.init($("#tree-dep"), this.setting, data.data.data);
            let tepData = this.switchData(data.data);
            this.hasIconData = this.addPeopelNumAfterStationName(tepData)
            $.fn.zTree.init($("#tree-dep"), this.setting, this.hasIconData);
            $(function(){
              $("#tree-dep > li").eq(0).children("a").click();
            });
            this.$nextTick(function(){
              this.setBackSize();
            })
          })
          .catch((err)=>{
            //console.log(err);
          })
      },
      showIconForTree(treeId, treeNode){
        // 如果有pictureUrl则代表是人员，以图标的方式显示图像
        return treeNode.hasOwnProperty('pictureUrl');
      },
      zTreeOnClick(evt, treeId, treeNode){
        if(treeNode.hasOwnProperty('policeCode')){  // 点击的是人员
          this.userImgSrc = treeNode.icon;
          this.isDepartment = false;
           // policePhone: '', // 点击人员电话
           //  policeRadioId: '', // 点击人员电台
           //  policePosition: '', // 点击人员职位
           //  policeDepartment: '', // 点击人员单位
          this.StringIf(treeNode, 'policePhone' )
          this.StringIf(treeNode, 'policeRadioId' )
          this.StringIf(treeNode, 'policePosition' )
          let parentAry = treeNode.getPath();
          let str = '';
          for(let i = 0; i < parentAry.length-1; i++){
            str = str + parentAry[i]['name']
          }
          this.policeDepartment = str;
        }
        else {  // 点击部门
          this.userImgSrc = require('@/../static/img/department.png');
          this.isDepartment = true;
          // 如果为空则显示暂无
          if(treeNode.stationRadioId){
            this.stationRadioId = treeNode.stationRadioId;
          }
          else {
            this.stationRadioId = '暂无';
          }
          if(treeNode.stationTel){
            this.stationTel = treeNode.stationTel;
          }
          else {
            this.stationTel = '暂无';
          }
        }
        this.userName = treeNode.name;
        //console.log(evt)
        //console.log(treeId)
        //console.log(treeNode)
        //console.log(this.isDepartment)

      },
      zTreeOnExpand(evt, treeId, treeNode){
        this.setBackSize();
      },
      switchData(data){
        for(let i = 0; i < data.length; i++){
          if(data[i].hasOwnProperty('pictureUrl') && data[i].pictureUrl){ // 有pictureUrl且有值
            data[i]['icon'] = baseURL                         //运行环境
              + 'api/jp-TIFS-FileCenter-ms/file?businessId='  //微服务地址
              + data[i].pictureUrl;
            data[i]["name"] = data[i]["name"]+"("+data[i]["policeCode"]+")";
          }
          else if(data[i].hasOwnProperty('pictureUrl')){ // 有pictureUrl没有值，使用默认图片
            data[i]['icon'] = require('@/../static/img/Policeman.png')
            data[i]["name"] = data[i]["name"]+"("+data[i]["policeCode"]+")";
          }
        }
        return data;
      },
      setBackSize(){
        let length = $('.ico_docu').length;
        for(let i = 0; i < length; i++){
          $('.ico_docu')[i].style['background-size'] = "100% 100%";
        }
      },
      StringIf( treeNode, Str ){
        if(treeNode[Str]){
          this[Str] = treeNode[Str];
        }
        else {
          this[Str] = '暂无';
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .address-list {
    display: flex;
    padding-top: 50px;
    background-color: #00213b;
  }
  .tree-wrap{
    width: 300px;
    height: 100%;
  }
  .div-tree {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    float: left;
    padding-bottom: 40px;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .content-wrap {
    width: calc(100% - 300px);
    height: 100%;
    .title-wrap {
      width: 100%;
      position: relative;
      .title-img {
        width: 100%;
        min-height: 158px;
      }
      .user-wrap {
        width: 100%;
        height:158px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        .user-img-wrap {
          display: inline-block;
          width: 116px;
          height: 116px;
          border-radius: 50%;
          background-color: #002d77;
          .user-img {
            width: 116px;
            height: 116px;
            border-radius: 50%;
            display: inline-block;
          }
        }
        .user-name {
          color: #fff;
          line-height: 34px;
          font-size: 20px;
        }
      }
    }
  }
  .details-wrap {
    padding-top: 48px;
  }
  .details-department{
    display: flex;
    flex-wrap: wrap;
    .department-wrap {
      flex: 0 0 50%;
      padding-left: 38px;
      padding-top: 10px;
      font-size: 14px;
      .department-title {
        color: #4fa6ff;
      }
      .department-content {
        color: #ffffff;
      }
    }
  }
  .ztree li span.button.ico_docu {
    border-radius: 50%;
  }

</style>
